<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/resource/css/bootstrap.min.css">
<link rel="stylesheet" href="/resource/css/index.css">
</head>
<body>
	<div class="container">
		<div>
			<!-- 图片 -->
			<a href="/"> <img alt="" src="/resource/pic/logo-admin.jpg" height="50" width="100" ></a> 
			
			<div class="float-right align-items-center" >
			<br>
				<!-- 右侧的个人中心和退出按钮 -->
				<!-- 如果已经登录，则显示个人中心和退出 -->
					<c:if test="${user!=null }">
						你好，<b>${user.nickname }</b>
						<input class="btn btn-primary btn-sm" type="button" onclick="toCenter()" value="${user.role==0?'个人中心':'管理员中心' }">
						<input class="btn btn-primary btn-sm" type="button" onclick="logout()" value="退出">
					</c:if>
					
					<!-- 如果没有登录，则显示登录和注册按钮 -->
					<c:if test="${user==null }">
						<input class="btn btn-primary btn-sm" type="button" onclick="toLogin()" value="登录">
						<input class="btn btn-primary btn-sm" type="button" onclick="toReg()" value="注册">
					</c:if>
			</div><br>
		<hr>
		</div>
	
		<div class="row ">
			<!-- ---左侧导航菜单栏---- -->
			<div class="col-md-2 ">
				<ul class="list-unstyled channel">
					<!-- 热点 -->
					<li class="media ">
						<a class="channel-item ${article.channelId==null?'active':'' }" href="/">热点</a>
					</li>
					<!-- 非热点的频道 -->
					<c:forEach items="${channels }" var="c">
						<li class="media ">
							<a class="channel-item ${article.channelId==c.id?'active':'' }" href="/?channelId=${c.id }">${c.name }</a>
						</li>
					</c:forEach>
				</ul>
			</div>
		
			<!-- ---中间数据展示区--- -->
			<div class="col-md-7">
				<!-- 展示热点文章 -->
				<c:if test="${article.channelId==null }">
				
					<!-- 轮播图 -->
					<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
						  <ol class="carousel-indicators">
						  
						  	<!-- 设置图片个数 -->
						  	<c:forEach items="${slides }" var="s" varStatus="i">
						    	<li data-target="#carouselExampleCaptions" data-slide-to="${i.index }" class="${i.index==0?'active':'' }"></li>
						    </c:forEach>
						    
						  </ol>
						  <div class="carousel-inner">
						  
						  	<!-- 设置图片 -->
						  	<c:forEach items="${slides }" var="s" varStatus="i">
						  	
							    <div class="carousel-item ${i.index==0?'active':'' }">
							      <img src="/pic/${s.picture }" class="d-block w-100" alt="..." height="400">
							      <div class="carousel-caption d-none d-md-block">
							        <h5>${s.title }</h5>
							      </div>
							    </div>
							    
							</c:forEach>
						    
						  </div>
						  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
						    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
						    <span class="sr-only">Previous</span>
						  </a>
						  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
						    <span class="carousel-control-next-icon" aria-hidden="true"></span>
						    <span class="sr-only">Next</span>
						  </a>
					</div>
					<hr>
					
					<!-- 热点数据展示 -->
					<ul class="list-unstyled">
						<c:forEach items="${info.list}" var="article">
							<li class="media">
								
								<!-- 点击链接查看文章详情 -->
								<a class="media-body" href="/articleDetail?id=${article.id }">
								
								<div class="row">
								
									<div class="col-md-2">
										<img src="/pic/${article.picture}" height="50" width="50">
									</div>
									<div class="col-md-10">	
										<h4><b>${article.title }</b></h4>
										<br>${article.userName }·${article.hits }点击·${article.displayTime }
									</div>
								</div>
								</a>
							</li>
							<hr>
						</c:forEach>
					</ul>
					
				</c:if>
				
				<!-- 根据栏目和分类展示非热点文章 -->
				<c:if test="${article.channelId!=null }">
					
					<!-- 展示分类 -->
					<div class="subchannel">
						<ul >
							<!-- 全部分类数据 -->
							<li class="sub-item ${article.categoryId==null?'sub-selected':'' }">
								<a href="/?channelId=${article.channelId }">全部</a>
							</li>
							
							<!-- 其他分类数据 -->
							<c:forEach items="${categories }" var="c">
								<li class="sub-item ${article.categoryId==c.id?'sub-selected':'' }">
									<a href="/?channelId=${article.channelId }&categoryId=${c.id}">${c.name }</a>
								</li>
							</c:forEach>
						</ul>
					</div>
					
					<!-- 数据展示 -->
					<ul class="list-unstyled">
						<c:forEach items="${info.list}" var="article">
							<li class="media">
								<!-- 点击链接查看文章详情 -->
								<a class="media-body" href="/articleDetail?id=${article.id }">
								
								<div class="row">
								
									<div class="col-md-2">
										<img src="/pic/${article.picture}" height="50" width="50">
									</div>
									<div class="col-md-10">	
										<h4><b>${article.title }</b></h4>
										<br>${article.userName }·${article.hits }点击·${article.displayTime }
									</div>
								</div>
								</a>
							</li>
							<hr>
						</c:forEach>
					</ul>
				</c:if>
				
				<!-- 引入分页 -->
				<jsp:include page="/WEB-INF/view/common/pages.jsp"></jsp:include>
			</div>
			
			<!-- ---右侧--- -->
			<div class="col-md-3">
				<!-- 24小时热文 -->
				<div class="card" style="width: 18rem;">
					  <div class="card-header">
					    <h5><b>24小时热文</b></h5>
					  </div>
					  
					  <div class="card-body">
						  <ul class="list-group list-group-flush">
						  	<c:forEach items="${hot24Info.list}" var="article" >
						    	<li class="list-group-item"> 
						    		<!-- 点击链接查看文章详情 -->
									<a href="/articleDetail?id=${article.id }">
						    			${article.title }
						    		</a>
						    	</li>
						    </c:forEach>
						  </ul>
					  </div>
				</div>
					
				<!-- 点击量排行榜 -->
				<div class="card" style="width: 18rem;">
				  <div class="card-header">
				    <h5><b>点击量排行榜</b></h5>
				  </div>
				  <ul class="list-group list-group-flush">
				  	<c:forEach items="${hitInfo.list}" var="article" varStatus="i">
				    	<li class="list-group-item">${i.count} 
				    		<!-- 点击链接查看文章详情 -->
							<a href="/articleDetail?id=${article.id }">
								${article.title }
							</a>
						</li>
				    </c:forEach>
				  </ul>
				</div>
					
					
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	function goPage(pageNum){
		//分页的路径
		var url = "/?pageNum="+pageNum;
		
		//获取频道栏目id
		var channelId="${article.channelId}";
		
		//获取分类id
		var categoryId="${article.categoryId}";
		
		//如果频道栏目id不为空
		if(channelId!=null && channelId != ''){
			url += "&channelId="+channelId;
			
			//如果分类id不为空
			if(categoryId!=null && categoryId != ''){
				url += "&categoryId="+categoryId;
			}
		}
		
		//跳转路径
		location=url;
	}
	
	//登录
	function toLogin(){
		location="/user/toLogin";
	}
	//注册
	function toReg(){
		location="/user/toReg";
	}
	
	//去个人中心
	function toCenter(){
		//获取角色role值
		var role = '${user.role}';
		
		//判断role值
		if(role == 0){
			//普通用户
			location="/my/";
		}else{
			//超级管理员
			location="/admin/";
		}
	}
	
	//退出登录
	function logout(){
		location="/user/logout";
	}

</script>

</html>